<template>
  <div class="every">
    <div class="title">全部完成</div>
    <div class="caseCon" v-for="(item, index) in listData" :key="index">
      <div v-if="item.completeCount == 0">
        <div class="caseOne">
          <p>{{ item.name }}</p>
          <p class="p1" v-if="item.childFlag != 1 && item.checkFlag == 1">
            <span>目标值</span>
            <span>{{ item.targetValue }}</span>
            <span>{{ item.targetUnit }}</span>
          </p>
          <p v-if="item.checkFlag == 0" class="noCheck">不考核</p>
        </div>
        <ul v-if="item.childFlag == 1">
          <li v-for="(child, index) in item.children" :key="index">
            <p>{{ child.name }}</p>
            <p class="p1">
              <span>目标值</span>
              <span>{{ child.targetValue }}</span>
              <span>{{ child.targetUnit }}</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
    <div class="title" v-if="completeLen">完成1项即可</div>
    <div class="caseCon" v-for="(item, index) in completeCount1" :key="'1' + index">
      <div>
        <div class="caseOne">
          <p>{{ item.name }}</p>
          <p class="p1" v-if="item.childFlag != 1 && item.checkFlag == 1">
            <span>目标值</span>
            <span>{{ item.targetValue }}</span>
            <span>{{ item.targetUnit }}</span>
          </p>
          <p v-if="item.checkFlag == 0" class="noCheck">不考核</p>
        </div>
        <ul v-if="item.childFlag == 1">
          <li v-for="(child, index) in item.children" :key="index">
            <p>{{ child.name }}</p>
            <p class="p1">
              <span>目标值</span>
              <span>{{ child.targetValue }}</span>
              <span>{{ child.targetUnit }}</span>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'rate',
    props: {
      listData: {
        type: Array,
        default: []
      }
    },
    data() {
      return {
        completeCount1: [],
        completeLen: 0
      }
    },

    watch: {
      listData: {
        handler(val, oldVal) {
          this.completeCount1 = val.filter((item) => {
            return item.completeCount == 1
          })
          this.completeLen = this.completeCount1.length
        },
        deep: true,
        immediate: true
      }
    },

    created() {},
    mounted() {},

    methods: {}
  }
</script>
<style lang="scss" scoped>
  .title {
    color: #999;
    font-size: 16px;
    margin-top: 15px;
  }
  .caseCon {
    ul {
      li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        line-height: 2;
        font-size: 15px;
        font-weight: normal;
        padding-left: 15px;
      }
    }
    .caseOne {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      line-height: 2;
      font-size: 15px;
      font-weight: normal;
    }
    .p1 {
      width: 30%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      color: #19be6b;
      text-align: center;
      span:nth-child(1) {
        display: block;
        width: 46px;
      }
      span:nth-child(2) {
        display: block;
        flex: 1;
      }
      span:nth-child(3) {
        display: block;
        width: 20px;
      }
    }
    .noCheck {
      color: #ed4014;
      text-align: left;
    }
  }
</style>
